import React, { Component} from 'react';
import { Space, Button, Table, Modal, Typography, Switch, Row, Col} from 'antd'
import { connect } from 'react-redux';
import * as actions from '../store/action';
import { DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';


class AccountTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pageIndex: 1,   //页码
            pageSize: 10,   //每页显示条数
            selectedRowKeys: [], // 存储删除多个信息的key的数组
        }
    }
    onFinish = (record)=>{
        this.props.startAuthorization(record.key)
    }
    //删除警告弹窗
    deleteConfirm(key, text) {
        Modal.confirm({
            title: '确认',
            content: (
                <div>
                    是否删除该用户
                    <Typography.Text strong type="danger">
                        {text}
                    </Typography.Text>
                    的信息
                </div>
            ),
            okText: '确认',
            okType: 'danger',
            cancelText: '取消',
            onOk: () => {
                const obj = {
                    idList: [key],
                }
                this.props.deleteBasicDatas(obj)
            },
            onCancel: () => {

            }
        })
    };
    render() {
        const columns = [
            {
                key: 0,
                title: '序号',
                align: 'center',
                render: (text, record, index) => {
                    return (this.state.pageIndex - 1) * this.state.pageSize + index + 1
                }
            },
            {
                title: '账号',
                dataIndex: 'account',
                key: 'account',
                align: 'center',
            },
            {
                title: '密码',
                dataIndex: 'password',
                key: 'password',
                align: 'center',
            },
            {
                title: '角色',
                dataIndex: 'remarks',
                key: 'remarks',
                align: 'center',
            },
            {
                title: '联系方式',
                dataIndex: 'phone',
                key: 'phone',
                align: 'center',
            },
            {
                key: 2,
                title: '是否授权',
                dataIndex: 'authorization',
                align: 'center',
                render: (text, record) => {
                    return(
                        <div>
                            {
                                record.account == "admin" ? (
                                    <Space>
                                        <Switch
                                            checkedChildren="已授权"
                                            unCheckedChildren="未授权"
                                            disabled={true}
                                            defaultChecked={record.authorization}
                                            onClick={() => this.onFinish(record)}
                                        />
                                    </Space>
                                ):(
                                    <Space>
                                        <Switch
                                            checkedChildren="已授权"
                                            unCheckedChildren="未授权"
                                            defaultChecked={record.authorization}
                                            onClick={() => this.onFinish(record)}
                                        />
                                    </Space>
                                )
                            }
                              
                        </div>
                    )
                }
            },
            {
                title: '操作',
                dataIndex: 'operation',
                key: 'operation',
                align: 'center',
                render: (text, record) => {
                    return (
                        <Space>
                            <Button type='primary' icon={<DeleteOutlined />} ghost danger onClick={() => this.deleteConfirm(record.id, record.account)} >删除</Button>
                        </Space>
                    )
                }
            },
        ];
        const rowSelection = {
            selectedRowKeys: this.selectedRowKeys,
            onChange: this.changeSelectedRowKeyss,
        }
        return (
            <Row>
               <Col span={24}>
                    <Button danger onClick={this.batchDeleteAdmin} disabled={this.state.selectedRowKeys.length == 0 ? true : false} style={{ marginTop: "10px" }} ><DeleteOutlined />批量删除</Button>
               </Col>
               <Col span={24}>
                    <Table
                        columns={columns}
                        rowSelection={rowSelection}
                        pagination={{
                            onChange: page => {
                                console.log(page);
                            },
                            pageSize: 5,
                        }}
                        dataSource={this.props.adminDatas}
                        bordered style={{ marginTop: 10 }}
                    />
               </Col>
            </Row>
        );
    }
    // 批量选中多个数据时存储的key数组
    changeSelectedRowKeyss = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys

        })
    }
    //批量删除多管理员
    batchDeleteAdmin = () => {
        const { selectedRowKeys } = this.state;
        if (selectedRowKeys.length !== 0) {
            Modal.confirm({
                title: '确认',
                icon: <ExclamationCircleOutlined />,
                content: (
                    <div>
                        确人删除房该批管理员
                    </div>
                ),
                okText: '确认',
                okType: 'danger',
                cancelText: '取消',
                onOk: () => {
                    const obj = {
                        idList: selectedRowKeys
                    }
                    this.props.deleteBasicDatas(obj)
                },
                onCancel: () => {

                }
            })
        } else {
        }
    }
    
}
const mapDispatchToProps = (dispatch) => ({
    deleteBasicDatas(idList) {
        dispatch(actions.deleteBasicDataRequest(idList))
    },
    startAuthorization(id) {
        dispatch(actions.startAuthorization(id))
    }

})
export default connect(null, mapDispatchToProps)(AccountTable);